$border-color: #d7d7d7;

.table-container {
  // max-height: 60vh;
  overflow: auto;
  user-select: text;

  // pointer-events: all;
  &::-webkit-scrollbar {
    display: initial;
    width: 8rpx;
    height: 0;
    -webkit-border-radius: 6rpx;
    -moz-border-radius: 6rpx;
    border-radius: 6rpx;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
    -webkit-border-radius: 8rpx;
    -moz-border-radius: 8rpx;
    border-radius: 8rpx;
    min-height: 0;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 8rpx;
    -moz-border-radius: 8rpx;
    border-radius: 8rpx;
  }

  // /deep/.uni-scroll-view{
  //   overflow: initial !important;
  // }

  table {
    border-collapse: collapse;
    width: 100%;
    // min-width: 1000px;
    font-size: 0.875rem;
    font-weight: initial;
    margin: auto;

    tr {
      background-color: #ffffff;

      td {
        background-color: #ffffff;
      }
    }

    tr:nth-child(2n+3) {
      background-color: #f4f9ff;

      td {
        background-color: #f4f9ff;
      }
    }

    th {
      box-sizing: border-box;
      padding: 10rpx;
      height: 88rpx;
      // min-width: 170rpx;
      position: relative;
      font-size: 0.875rem;
      // font-weight: initial;
      white-space: pre-line;
      word-break: break-all;
      // border: 1rpx solid #666;
      background-color: rgb(221, 235, 254);
      // background-color: rgb(178, 203, 238);
      border: 2rpx solid $border-color;
      color: #333;

      &.sticky-left {
        position: sticky;
        left: 0;
        z-index: 1;
      }

      &[align="center"] {
        text-align: center;
      }

      &[align="left"] {
        text-align: left;
      }

      &[align="right"] {
        text-align: right;
      }

      .item-center {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .filter-btn {
        position: relative;
        top: 3px;
        display: inline-block;
        padding: 5rpx 5px 5px 7px;
        font-size: 17px;
        color: #ccc;

        &.active {
          color: #007aff;
        }
      }

      .sort-box {
        display: inline-block;
        padding: 5px 5px 5px 3px;
        position: relative;
        top: 2px;

        .sort {
          display: block;
          position: relative;
          width: 0px;
          height: 0px;
          // padding: 2rpx 6rpx;
          overflow: hidden;
          cursor: pointer;

          &.up {
            border-width: 7px 6px 7px 6px;
            border-style: solid;
            border-color: transparent transparent #ccc transparent;
            margin-top: -2px;

            &.active {
              border-color: transparent transparent #007aff transparent;
            }
          }

          &.down {
            border-width: 7px 6px 7px 6px;
            border-style: solid;
            border-color: #ccc transparent transparent transparent;
            margin-top: 2px;

            &.active {
              border-color: #007aff transparent transparent transparent;
            }
          }
        }
      }

      .filter-container {
        width: 480rpx;
        position: absolute;
        padding: 24rpx;
        border-radius: 8rpx;
        background-color: #ffffff;
        top: 88rpx;
        z-index: 9;
        font-weight: initial;
        transform: scaleY(0);
        transform-origin: center top;
        box-shadow: 0 8rpx 24rpx 0 #d7d7d7;
        transition: 0.26s;

        &.show {
          transform: scaleY(100%);
        }

        .row {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: space-between;

          .date-picker {
            padding: 16rpx;
            text-align: center;
            flex: 1;
            border-radius: 8rpx;
            background-color: #f7f7f7;
          }
        }

        .option-list {
          .option {
            padding: 18rpx;

            &.active {
              color: #007aff;
            }
          }
        }

        .btn-group {
          margin-top: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .btn {
            padding: 8rpx 18rpx;
            border-radius: 6rpx;
            font-size: 26rpx;
            color: #333;
            border: 1rpx solid #dedede;

            ~.btn {
              margin-left: 48rpx;
            }

            &.primary {
              background-color: #007aff;
              color: #fff;
              border-color: #007aff;
            }
          }
        }
      }
    }

    td {
      box-sizing: border-box;
      padding: 10rpx;
      height: 88rpx;
      min-width: 80rpx;
      position: relative;
      font-size: 0.875rem;
      white-space: pre-line;
      word-break: break-all;
      // border: 1rpx solid #666;
      border: 1rpx solid $border-color;

      &.sticky-left {
        position: sticky;
        left: 0;
        z-index: 1;
      }

      &[align="center"] {
        text-align: center;
      }

      &[align="left"] {
        text-align: left;
      }

      &[align="right"] {
        text-align: right;
      }

      &.danger {
        color: #f56c6c;
      }

      textarea {
        width: auto;
        font-size: 0.875rem;
      }

      input {
        font-size: 0.875rem;
      }

      .inline-content {
        input {
          height: 28rpx;
          width: 60rpx;
          line-height: 28rpx;
          text-align: center;
          display: inline-block;
          position: relative;
          top: 12rpx;
          font-size: 0.875rem;
        }
      }
    }
  }
}
